<template>
  <div class="page">
    <div>
      <el-form :label-position="labelPosition" label-width="80px" :model="typeList">
        <el-form-item label="名称">
          <el-input v-model="typeList.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="typeList.describe"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <div>
            <input type="file" name="img" @change="fileChange($event)" >
          </div>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="makesure">确认添加</el-button>

      </div>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'

export default {
  name: 'AddType',
  data () {
    return {
      labelPosition: 'left',
      typeList: {
        name: '',
        img: '',
        describe: ''
      },
      fileList: []
    }
  },
  created () {},
  methods: {
    fileChange(event) {
      this.file = event.target.files[0]
      console.log(this.file)
    },
    makesure () {

      let that = this
      remote('addtype', true, {
        name: this.typeList.name,
        describe: this.typeList.describe,
        file: this.file
      }).then(response => {
        if (response.data.code === 0) {
          that.$message({
            message: response.data.message,
            type: 'success'
          })
        } else {
          that.$message({
            message: response.data.message,
            type: 'success'
          })
        }
      })
    },
    cancelupdata () {
      console.log('取消修该')
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    }
  }
}
</script>

<style scoped>
  .page{
    font-size: 40px;
    font-weight: bold;
    padding: 50px 50px;
  }
</style>
